<template>
  <div class="the-list">

    <div class="panel-table">
      <div class="table-head">
        <span>数据列表</span>
        <div>
          <el-button type="primary" @click="tableFn.goToAddPage" v-if="hasPermission(['material:guide'])">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" border>
        <el-table-column prop="createdAt" label="添加时间" />
        <el-table-column label="当前状态">
          <template #default="{row}">
            <span :style="{color:['#D9001B','#70B603'][row.status]}">{{getItemFromArray(guideList.used,row.status) || "--"}}</span>
            
          </template>
        </el-table-column>
        <el-table-column label="主体" class-name="img-panel" min-width="430px">
          <template #default="{row}">
            <div class="imgs-bg">
              <template v-for="(url,index) in row.images" :key="index">
                <span v-if="index>0" class="next">-</span>
                <div @click="detailFn.openImageViewer(row.images,index)" style="display:inline-block;">
                  <el-image style="width: 68px; height: 68px;" :src="url" fit="contain"></el-image>
                </div>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="适用版本">
          <template #default="{row}">
            <template v-for="(v,i) in row.versions||[]" :key="i">
              <span>{{i?'，':''}}{{v}}</span>
              <!-- <el-tag></el-tag> -->
            </template>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{row}">
            {{row.remark}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140px" align="center">
          <template #default="{row}">
            <el-button size="small" type="primary" plain @click="detailFn.goToDetail(row)">详情</el-button>
            <el-button v-if="hasPermission(['material:guide'])" size="small" type="danger" plain @click="deleteFn.sureDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <pagination :total="tableData.total" v-model:page="tableData.query.page" v-model:limit="tableData.query.pageSize" @pagination="tableFn.getTableList" />
      </div>

    </div>
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import { getGuideList,deleteGuide }  from "@/api/material.js";
// import imageViewer from "@/components/imageViewer";
import { ElMessage, ElMessageBox } from "element-plus";
import Pagination from "@/components/Pagination";
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import { guideList,getItemFromArray }  from "@/utils/tool.js";
import imageViewer from "@/components/imageViewer/index2";


export default {
  name:"MaterialGuide",
  components:{
    // imageViewer,
    Pagination,
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule();
    const { $fn: deleteFn } = deleteModule(tableFn);
    const { $data: detailData, $fn: detailFn } = detailModule();
    
    const router = useRouter();
    watch(()=>router.currentRoute.value,(nv,ov)=>{
      if(nv.name === "MaterialGuide" && (ov.name==="guideOperate" || ov.name==="guideDetail")){
        console.log("from:",ov,"to:",nv);
        tableData.query.page = 1;
        tableFn.getTableList();
      }
    })
    return {
      tableData,
      tableFn,
      deleteFn,
      detailData,
      detailFn,
      guideList,getItemFromArray,
    };
  },
};

// 表格功能模块，包括搜索，分页，列表展示，图片预览
function tableModule() {
  const router = useRouter();
  const backup = {
    query: {
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
  });
  const $fn = {
    getTableList() {
      getGuideList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    onSubmit() {
      $fn.getTableList();
    },
    goToAddPage() {
      router.push(`/material/guideList/operate`);
    }
  };

  $fn.getTableList();

  return {
    $data,
    $fn,
  };
}

// 删除操作模块
function deleteModule(tableFn) {
  const $data = reactive({
    nowData: {},
    showPanel: false,
    showSure: false,
  });
  const $fn = {
    sureDelete(id) {
      ElMessageBox.confirm("是否删除该引导页？", "提示", {
        type: "error",
      }).then(() => {
        deleteGuide(id).then((res) => {
          if(res.code===0){
            ElMessage.success("操作成功");
            tableFn.getTableList();
          }
        });
      });
    },
  };
  return {
    $data,
    $fn,
  };
}

// 数据详情模块，包括 查看详情，大图预览
function detailModule(){
  const router = useRouter();
  const $fn = {
    openImageViewer(list,index){
      imageViewer({initialIndex: index,urlList: list});
    },
    goToDetail(row){
      router.push(`/material/guideList/detail/${row.id}`)
    }

  }

  return {
    $fn,
  }
}
</script>


<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.the-list {
  :deep(.el-table__row .img-panel .cell) {
    font-size: 0;
    line-height: 0;
    .imgs-bg {
      display: flex;
      justify-content: left;
      align-items: center;
      img {
        cursor: pointer;
        align-items: top;
      }
      .next {
        display: inline-block;
        font-size: 16px;
        width: 16px;
        text-align: center;
        color: rgb(95, 95, 95);
        line-height: 48px;
        align-items: top;
      }
    }
  }
}
.el-form-item {
  margin-bottom: 8px;
}
</style>
